<!DOCTYPE html>
<!--[if IE 8]><!--><html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />

  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" content="width=device-width" />

  <title>Welcome to Foundation</title>

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.css">

  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>
	<!-- Header and Nav -->
	<div class="contain-to-grid">
	<nav class="top-bar">
	  <ul class="title-area">
		<!-- Title Area -->
		<li class="name">
		  <h1><a href="#">Condition Survey Report</a></h1>
		</li>
		<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
		<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
	  </ul>

	  <section class="top-bar-section">
		<!-- Left Nav Section -->
		<ul class="left">
		  <li class="divider"></li>
		  <li class="active"><a href="#">List of Report</a></li>
		  <li class="divider"></li>
		  <li><a href="#">Add New</a></li>
		  <li class="divider"></li>
		</ul>

		<!-- Right Nav Section -->
		<ul class="right">
		  <li class="divider show-for-small"></li>
		  <li class="has-form">
			<a class="small alert radius button" href="#">Logout</a>
		  </li>
		</ul>
	  </section>
	</nav>
	</div> 
	<br/>
	<!-- End Header and Nav -->
  
  
  <div class="row">    
	<!-- Nav Sidebar -->
    <!-- This is source ordered to be pulled to the left on larger screens -->
    <div class="large-4 push-8 columns">
        
      <ul class="side-nav ">
		<li><h4>Form Navigation</h4></li>
		<li class="divider"></li>
        <li class="active"><a href="#">Condition Survey Report</a></li>
		<li><a href="section-a.html">Section A: Certification & Documentation</a></li>
		<li><a href="#">Section B: Manning & Management</a></li>
		<li><a href="#">Section C: Bridge & Navigation</a></li>
		<li><a href="#">Section D: Accomodation</a></li>
		<li><a href="#">Section E: Safety</a></li>
		<li><a href="#">Section F: Hull & Deck Arrangements</a></li>
		<li><a href="#">Section G: Cargoworthiness</a></li>
		<li><a href="#">Section H: Ballast Tanks</a></li>
		<li><a href="#">Section I: Machinery Spaces</a></li>
		<li><a href="#">General Comments</a></li>
      </ul>
      
      <!-- p><img src="http://placehold.it/320x240&text=Ad" /></p -->
        
    </div>
	
    <!-- Main Content Section -->
    <!-- This has been source ordered to come first in the markup (and on small devices) but to be to the right of the nav on larger screens -->
    <div class="large-8 pull-4 columns">
      
      <h3>Condition Survey Report</h3>
      
      <div class="has-form">
		<form>
			<fieldset>
				<legend>General Information</legend>
				
				<div class="row right">
					<div class="large-12 columns">
						<input type="submit" value="Save" class="small radius button">
					</div>
				</div>
				
				<div class="row">
				  <div class="large-12 columns">
					<label><h6>NAME OF VESSEL</h6></label>
					<input type="text" placeholder="NAME OF VESSEL" required>
				  </div>
				</div>

				<div class="row">
				  <div class="large-6 columns">
					<label><h6>IMO NUMBER</h6></label>
					<input type="text" placeholder="IMO NUMBER" required>
				  </div>
				  <div class="large-6 columns">
					<label><h6>FLAG</h6></label>
					<input type="text" placeholder="FLAG" required>
				  </div>
				  <!-- div class="large-4 columns">
					<div class="row collapse">
					  <label>Input Label</label>
					  <div class="small-9 columns">
						<input type="text" placeholder="small-9.columns">
					  </div>
					  <div class="small-3 columns">
						<span class="postfix">.com</span>
					  </div>
					</div>
				  </div -->
				</div>
				<div class="row">
				  <div class="large-6 columns">
					<label><h6>GROSS TONNAGE</h6></label>
					<input type="text" placeholder="GROSS TONNAGE" required>
				  </div>
				  <div class="large-6 columns">
					<label><h6>YEAR OF BUILT</h6></label>
					<input type="text" placeholder="YEAR OF BUILT" required>
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>REGISTERED OWNER</label>
					<input type="text" placeholder="">
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>MANAGER OR OPERATOR</label>
					<input type="text" placeholder="">
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>CLASSIFICATION SOCIETY</label>
					<input type="text" placeholder="">
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>PREVIOUS OWNERS</label>
					<input type="text" placeholder="">
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>PREVIOUS VESSEL NAMES</label>
					<input type="text" placeholder="">
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>TYPE OF VESSEL</label>
					<input type="text" placeholder="">
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>PREVIOUS THREE CARGOES CARRIED</label>
					<input type="text" placeholder="">
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>TRADING AREA</label>
					<input type="text" placeholder="">
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>DIMENSIONS OVERALL</label>
					<div class="small-4 columns">
						<input type="text" placeholder="L">
					</div>
					<div class="small-4 columns">
						<input type="text" placeholder="B">
					</div>
					<div class="small-4 columns">
						<input type="text" placeholder="H">
					</div>
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>DATE OF LAST DRY DOCK</label>
					<input type="text" placeholder="">
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>DATE OF NEXT DRYDOCK</label>
					<input type="text" placeholder="">
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>PLACE OF SURVEY</label>
					<input type="text" placeholder="">
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>DATE OF SURVEY</label>
					<input type="text" placeholder="">
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>SURVEY COMPANY</label>
					<input type="text" placeholder="">
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>NAME OF SURVEYOR</label>
					<input type="text" placeholder="">
				  </div>
				</div>

				<div class="row">
				  <div class="large-12 columns">
					<label>NAME OF MASTER / OWNERS REP.</label>
					<input type="text" placeholder="">
				  </div>
				</div>


				<div class="row">
				  <div class="large-12 columns">
					<label><h6>CONDITION RATING</h6></label>
					<div class="row">
						<div class="large-6 columns">
							<div class="row collapse">
								<div class="small-8 columns">
									<input type="text" placeholder="HULL">
								</div>
								<div class="small-4 columns">
									<span class="postfix">0 up to 9.0</span>
								</div>
							</div>
						</div>
						<div class="large-6 columns">
							<div class="row collapse">
								<div class="small-8 columns">
									<input type="text" placeholder="POLLUTION PREVENTION">
								</div>
								<div class="small-4 columns">
									<span class="postfix">0 up to 9.0</span>
								</div>
							</div>
						</div>
					</div>
					<div class="row ">
						<div class="large-6 columns">
							<div class="row collapse">
								<div class="small-8 columns">
									<input type="text" placeholder="CARGO WORTHINESS">
								</div>
								<div class="small-4 columns">
									<span class="postfix">0 up to 9.0</span>
								</div>
							</div>
						</div>
						<div class="large-6 columns">
							<div class="row collapse">					
								<div class="small-8 columns">
									<input type="text" placeholder="FIRE PREVENTION">
								</div>
								<div class="small-4 columns">
									<span class="postfix">0 up to 9.0</span>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="large-6 columns">
							<div class="row collapse">					
								<div class="small-8 columns">
									<input type="text" placeholder="NON-CARGO TANKS">
								</div>
								<div class="small-4 columns">
									<span class="postfix">0 up to 9.0</span>
								</div>
							</div>
						</div>
						<div class="large-6 columns">
							<div class="row collapse">					
								<div class="small-8 columns">
									<input type="text" placeholder="SAFETY / LIFE SAVING">
								</div>
								<div class="small-4 columns">
									<span class="postfix">0 up to 9.0</span>
								</div>
							</div>
						</div>	
					</div>
					<div class="row">
						<div class="large-6 columns">
							<div class="row collapse">					
								<div class="small-8 columns">
									<input type="text" placeholder="MACHINERY">
								</div>
								<div class="small-4 columns">
									<span class="postfix">0 up to 9.0</span>
								</div>
							</div>
						</div>
						<div class="large-6 columns">
							<div class="row collapse">					
								<div class="small-8 columns">
									<input type="text" placeholder="MANNING / MANAGEMENT">
								</div>
								<div class="small-4 columns">
									<span class="postfix">0 up to 9.0</span>
								</div>
							</div>
						</div>	
					</div>
					<div class="row">
						<div class="large-6 columns">
							<div class="row collapse">					
								<div class="small-8 columns">
									<input type="text" placeholder="NAVIGATION">
								</div>
								<div class="small-4 columns">
									<span class="postfix">0 up to 9.0</span>
								</div>
							</div>
						</div>
						<div class="large-6 columns">
							<div class="row collapse">					
								<div class="small-8 columns">
									<input type="text" placeholder="DOCUMENTATTION">
								</div>
								<div class="small-4 columns">
									<span class="postfix">0 up to 9.0</span>
								</div>
							</div>
						</div>	
					</div>
				  </div>
				</div>
							
				<div class="row">
				  <div class="large-12 columns">
					<label><h6>SUMMARY</h6></label>
					<textarea placeholder="" ></textarea>
				  </div>
				</div>
				
				<div class="row right">
					<div class="large-12 columns">
						<input type="submit" value="Save" class="small radius button">
					</div>
				</div>
				
			</fieldset>
		</form>
	  </div>
            
    </div>
    
  </div>
    
  
  <!-- Footer -->
  
  <footer class="row">
    <div class="large-12 columns">
      <hr />
      <div class="row">
        <div class="large-6 columns">
          <p>&copy; Copyright no one at all. Go to town.</p>
        </div>
        <div class="large-6 columns">
          <ul class="inline-list right">
            <li><a href="#">Section 1</a></li>
            <li><a href="#">Section 2</a></li>
            <li><a href="#">Section 3</a></li>
            <li><a href="#">Section 4</a></li>
          </ul>
        </div>
      </div>
    </div> 
  </footer>
  <script>
  document.write('<script src=js/vendor/' +
  ('__proto__' in {} ? 'zepto' : 'jquery') +
  '.js><\/script>')
  </script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>
